<template>
	<view>
		<u-tabs active-color='#FD5241' :list="listTbs" bg-color='transparent' :is-scroll="false" v-model="currentTabs"
			@change="changeTabs"></u-tabs>
		<view class="pr32 pl32">
			<view v-if="orderList.length !=0">
				<scroll-view scroll-y="true" class="pages" lower-threshold="400">
					<view class="shopData" v-for="(item,index) in orderList" :key="index"
						@tap="$wanlshop.to(`/pages/user/integral/integralOrderDetail?id=${item.id}`)">
						<view class="top-box flex-css">
							<view>订单编号：{{item.order_no}}</view>
							<view class="ziti">
								{{item.orderText}}
							</view>
						</view>

						<view class="center-box flex-css mt20">
							<view class="left-img">
								<image :src="$wanlshop.oss(item.goods[0].image)" mode=""></image>
							</view>
							<view class="price-data">
								<view>
									{{item.goods[0].title}}
								</view>
								<view class="flex-css mt36">
									<view class="jinbi">
										<image src="https://img.aibbyp.com/wechat/newImg/my/moneyIcon.png" mode="">
										</image>
									</view>
									<view class="flex-css price">
										<view><text style="font-weight: 550;">{{item.goods[0].price}} </text>积分</view>
										<view>x1</view>
									</view>
								</view>
							</view>
						</view>

						<view class="bottm-box mt12 fb">
							共{{item.goods[0].number}}件商品：
							<text class=" ml32 FA750C">合计：{{item.goods[0].price}} 积分</text>
						</view>
						<view class="flex btns" v-if="item.state == 6">
							<view class="ckwl textbtn" @click.stop="ckwl(item,index)">
								查看物流
							</view>
							<view class="qdsh textbtn ml32" @click.stop="qrsh(item,index)">
								确认收货
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-else class="dataNone">
				暂无记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabs: 0,
				listTbs: [{
						name: '全部'
					},
					{
						name: '待发货'
					}, {
						name: '待收货'
					},
				],
				orderList: [],
				loadModal: true,
			}
		},
		onLoad() {
			this.exchaneList()
			uni.$on('order', (res) => {
				this.exchaneList()
			})
			this.clearOrder()
		},
		methods: {
			ckwl(item, index) {
				this.$wanlshop.to('/pages/user/order/logistics?type=integral&id=' + item.id)
			},
			qrsh(item, index) {
				this.$api.post({
					url: '/wanlshop/score/confirmOrder',
					data: {
						id: item.id
					},
					success: res => {
						this.orderList[index].state = 6
					}
				})
			},
			changeTabs(i) {
				if (i == 0) {
					this.state = 0
					this.orderList = []
					this.exchaneList()
					return
				}
				if (i == 1) {
					this.state = 8
					this.orderList = []
					this.exchaneList()
					return
				}
				if (i == 2) {
					this.state = 3
					this.orderList = []
					this.exchaneList()
					return
				}
			},
			cancel(item) {
				this.$api.post({
					url: 'api/wanlshop/order/cancelOrder',
					data: {
						id: item.id
					},
					success: res => {
						this.exchaneList() // 取消订单刷心数据
					}
				})
			},
			clearOrder() {
				uni.$on('clearOrder', (data) => {
					this.exchaneList()
					this.$wanlshop.msg('取消订单成功')
				})
			},
			exchaneList() { //获取订单的兑换记录列表
				this.$api.get({
					url: "/wanlshop/score/getOrderList",
					data: {
						// 状态:0=全部,8=待发货,3=待收货
						state: this.state,
						limit: '',
					},
					success: res => {
						res.data.map((item, index) => {
							switch (item.state) {
								case 1:
									item.orderText = '待支付'
									item.orderbtn = '立即付款'
									break;
								case 8:
									item.orderText = '待发货'
									item.orderbtn = '提醒发货'
									break;
								case 3:
									item.orderText = '待收货'
									item.orderbtn = '确认收货'
									break;
								case 4:
									item.orderText = '待评论'
									item.orderbtn = '确认收货'
									break;
								case 6:
									item.orderText = '已完成'
									item.orderbtn = '评价'
									break;
								case 7:
									item.orderText = '已取消'
									item.orderbtn = '重新购买'
									break;
							}
							return item
						})
						this.orderList = res.data
						this.loadModal = false
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pages {

		height: 100%;
	}

	.btns {
		border-top: 1rpx solid #D8D8D8;
		padding-top: 28rpx;
		margin-top: 28rpx;
		justify-content: flex-end;

	}

	.textbtn {
		font-size: 24rpx;
		color: #F6710A;
		padding: 6rpx 24rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #F6710A;
	}

	.FA750C {
		color: #FA750C;
	}

	.quxiao {
		font-family: Source Han Sans;

		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;

		font-feature-settings: "kern" on;
		color: #666666;
	}



	.cu-load.load-modal {
		position: fixed;
		top: 240px;
		right: 0;
		bottom: 77px;
		left: 0;
		margin: auto;
		width: 143px;
		height: 156px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
		box-shadow: none;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 8px;
		z-index: 9999;
		line-height: 2.4em;
	}




	.jine {
		font-family: Source Han Sans;
		font-weight: 550;
		font-size: 14;
		font-size: 32rpx;
		color: #FF4530
	}

	.dataNone {
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-weight: 550;
		color: #a5a5a5;
	}

	.bottm-box {
		text-align: right;
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
		border-top: 1rpx solid #D8D8D8;
		padding-top: 20rpx;
		margin-top: 20rpx;
	}

	.price-data {
		font-family: Source Han Sans;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;

		font-feature-settings: "kern" on;
		color: #333333;
		width: 66vw;
		padding: 0 0 0 20px;
	}

	.price {
		width: 100%;
		justify-content: space-between;
	}

	.jinbi image {
		margin-top: 4rpx;
		width: 32rpx;
		height: 30rpx;
		border-radius: 20rpx;
		opacity: 1;

		border: 1rpx solid #FFFFFF;
	}

	.center-box {
		width: 100%;
		height: 12vh;
	}

	.left-img image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		opacity: 1;
	}

	.ziti {
		font-family: Source Han Sans;
		font-weight: 550;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #FF7F00;
	}

	.flex-css {
		display: flex;
		align-items: center;
	}

	.top-box {
		justify-content: space-between;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		color: #666666;
	}

	.shopData {
		width: 100%;
		border-radius: 20rpx;
		opacity: 1;
		margin: 20rpx auto;
		padding: 40rpx;
		background: #FFFFFF;
	}
</style>